extends layout

block content   
  script.
    $(document).ready(function(){
      var data = [
      ['Top 1-25', !{dista.percent}],['Top 26-50', !{distb.percent}],['Top 51-75', !{distc.percent}],['Top 76-100', !{distd.percent}],['101+', !{diste.percent}]
      ];
      var pieWealthDist = $.jqplot('pieChart', [data],
        {
          seriesColors: [ "#d9534f", "#5cb85c", "#428bca", "#222", "#CCC"],
          series: [{
            // Make this a pie chart.
            renderer: $.jqplot.PieRenderer,
            rendererOptions: {
              diameter: 260,
              padding: 0,
              sliceMargin: 4, 
              // Put data labels on the pie slices.
              // By default, labels show the percentage of the slice.
              showDataLabels: false,
            }
          }],
          grid: {borderWidth:0, shadow:false},
          legend: {
            show: false,
            rendererOptions: {
                numberRows: 1,
                border: 'none'
            },
            location: 's'
          }
        }
      );
    });
    $(window).resize(function () { 
      pieWealthDist.replot( { resetAxes: false } );
    });  
  .col-xs-12.col-md-8
    .tabpanel
      ul.nav.nav-tabs(role='tablist')
        li.active(role='presentation')
          a(href='#balance', aria-controls='balance', role='tab', data-toggle='tab') #{settings.locale.rl_balance} 
        li(role='presentation')
          a(href='#received', aria-controls='received', role='tab', data-toggle='tab') #{settings.locale.rl_received}
    .tab-content
      #balance.tabpanel.tab-pane.active 
        include ./includes/rl_balance.jade
      #received.tabpanel.tab-pane
        include ./includes/rl_received.jade
  if show_dist == true
    .col-md-4.col-xs-12
      #summary-panel.panel.panel-default(style='margin-top:47px;')
        .panel-heading
          h3.panel-title #{settings.locale.rl_wealth}
        table.table.table-hover.table-bordered
          thead
            tr
              th
              th #{settings.locale.rl_amount} (#{settings.symbol})
              th.text-center %
          tbody
            tr
              th
                div.pull-left(style='background-color:#d9534f;width:20px;height:20px;margin-right:6px;')
                span #{settings.locale.rl_top25}
              td #{parseFloat(dista.total).toFixed(8)}
              td.text-center #{parseFloat(dista.percent).toFixed(2)}
            tr
              th
                div.pull-left(style='background-color:#5cb85c;width:20px;height:20px;margin-right:6px;')
                span #{settings.locale.rl_top50}
              td #{parseFloat(distb.total).toFixed(8)}
              td.text-center #{parseFloat(distb.percent).toFixed(2)}
            tr
              th
                div.pull-left(style='background-color:#428bca;width:20px;height:20px;margin-right:6px;')
                span #{settings.locale.rl_top75}
              td #{parseFloat(distc.total).toFixed(8)}
              td.text-center #{parseFloat(distc.percent).toFixed(2)}
            tr
              th
                div.pull-left(style='background-color:#222;width:20px;height:20px;margin-right:6px;')
                span #{settings.locale.rl_top100}
              td #{parseFloat(distd.total).toFixed(8)}
              td.text-center #{parseFloat(distd.percent).toFixed(2)}
            tr
              th
                span #{settings.locale.total}
              td 
              td.text-center #{(100 - parseFloat(distd.percent)).toFixed(2)}
      center
        div#pieChart(style="width:300px;height:305px;margin:0px;")
  .row.footer-margin
